<template>
  <div>
    <h4 class="hotCity">热门城市</h4>
    <van-grid :gutter="10">
      <van-grid-item v-for="value in hotCities" :key="value.id" :text="value.nm" @click="goPlayingNow(value.nm,value.id)"/>
    </van-grid>
    <van-index-bar :sticky-offset-top="topDistance" highlight-color='red'>
      <div v-for="(item, index) in formatCities" :key="index">
        <van-index-anchor :index="item.index">{{item.index}}</van-index-anchor>
        <van-cell :title="city.nm" v-for="(city, index) in item.list" :key="index"  @click="goPlayingNow(city.nm,city.id)"></van-cell>
      </div>
    </van-index-bar>

    <!-- <div class="city_body">
      <div class="city_list">
        <div class="city_hot">
          <h2>热门城市</h2>
          <ul class="clearfix">
            <li
              v-for="(item) in hotCities"
              :key="item.id"
              @click="goPlayingNow(item.nm,item.id)"
            >{{item.nm}}</li>
          </ul>
        </div> -->
        <!-- <div class="city_sort" ref="cityRef">
          <div v-for="(item,index) in formatCities" :key="index">
            <h2>{{item.index}}</h2>
            <ul>
              <li
                v-for="(city) in item.list"
                :key="city.id"
                @click="goPlayingNow(city.nm,city.id)"
              >{{city.nm}}</li>
            </ul>
          </div>
        </div>-->
        <!-- <div class="city_index"> -->
        <!-- <ul>
          <li
            v-for="(item, index) in formatCities"
            :key="index"
            @touchstart="cityNav(index)"
          >{{item.index}}</li>
        </ul> -->
        <!-- </div> -->
      <!-- </div>
    </div> -->
    
  </div>
</template>
<script>
export default {
  name: 'cities',
  data() {
    return {
      hotCities: [],
      formatCities: [],
      indexList: [],
      topDistance: 96,
    }
  },
  methods: {
    goPlayingNow(nm, id) {
      this.$store.commit('GO_PAYINGNOW', { nm, id })
      window.localStorage.setItem('cityNm', nm)
      window.localStorage.setItem('cityId', id)
      this.$router.push('/movie/now')
    },
    cityNav(index) {
      let h2 = this.$refs.cityRef.getElementsByTagName('h2')
      document.documentElement.scrollTop = h2[index].offsetTop
    }
  },
  async created() {
    let hotCities = JSON.parse(window.localStorage.getItem('hotCities'))
    let formatCities = JSON.parse(window.localStorage.getItem('formatCities'))
    this.hotCities = hotCities
    this.formatCities = formatCities
    if (hotCities && formatCities) return
    let res = await this.$axios.get('/api/cityList')
    if (res.status !== 0) {
      console.log('get cityData error!!!')
      return
    }
    console.log(res.data)
    //[{index:A,list:[{nm:'xx',id:1}]}]
    let cities = res.data.cities
    hotCities = cities.filter(item => item.isHot)
    this.hotCities = hotCities
    window.localStorage.setItem('hotCities', JSON.stringify(hotCities))
    console.log(hotCities);
    
    formatCities = []
    for (let i = 0; i < cities.length; i++) {
      let firstLetter = cities[i].py.substring(0, 1).toUpperCase()
      if (isExist(firstLetter)) {
        formatCities.push({ index: firstLetter, list: [{ nm: cities[i].nm, id: cities[i].id }] })
      } else {
        for (let j = 0; j < formatCities.length; j++) {
          if (formatCities[j].index === firstLetter) {
            formatCities[j].list.push({ nm: cities[i].nm, id: cities[i].id })
          }
        }
      }
    }
    function isExist(letter) {
      for (let i = 0; i < formatCities.length; i++) {
        if (formatCities[i].index === letter) {
          return false
        }
      }
      return true
    }
    formatCities.sort((a, b) => {
      if (a.index > b.index) {
        return 1
      } else {
        return -1
      }
    })
    console.log(formatCities)
    formatCities.forEach(item => {
      this.indexList.push(item.index)
    })
    this.formatCities = formatCities
    window.localStorage.setItem('formatCities', JSON.stringify(formatCities))
    this.isShow = false
  }
}
</script>
<style scoped>
.hotCity {
  font-size: 20px;
  padding: 10px;
  font-weight: normal;
}
</style>
<style>
.van-index-anchor {
  font-size: 24px;
}
.van-grid-item__text {
  font-size: 16px;
}
.van-index-bar__index  {
  line-height: 18px!important;
}
</style>